<template>
  <div class="employDetail-page">
    <div class="header">
      <div style="display: flex">
        <img src="@/assets/img/1.png" />
        <div style="width: 100%">
          <div class="header-title">
            <div>美团</div>
            <div>帮大家吃得更好</div>
          </div>
          <div class="job-stats">
            <div class="job-stat-item">
              <span style="font-size: 20px">701个</span> <br />
              <span style="font-size: 14px">招聘职位</span>
            </div>
            <div class="divider"></div>
            <div class="job-stat-item">
              <span style="font-size: 20px">701个</span> <br />
              <span style="font-size: 14px">招聘职位</span>
            </div>
            <div class="divider"></div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="custom-tabs">
          <div
            class="tab-item"
            :class="{ active: activeTab === 'company' }"
            @click="switchTab('company')"
          >
            公司主页
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'job' }"
            @click="switchTab('job')"
          >
            招聘职位
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'campus' }"
            @click="switchTab('campus')"
          >
            校招职位
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'welfare' }"
            @click="switchTab('welfare')"
          >
            公司福利
          </div>
        </div>
      </div>
    </div>

    <div class="content" v-if="activeTab === 'company'">
      <div class="content-title">
        <span class="title-text">美团外卖产品</span>
        <span class="title-line"></span>
      </div>
      <div class="content-body">
        <img src="@/assets/img/1.png" class="content-logo" />
        <p class="content-description">
          美团外卖是国内领先的在线外卖平台，为用户提供便捷的外卖订餐服务。我们连接了数百万的用户和数十万的商家，致力于为用户提供高品质的餐饮体验。平台拥有完善的配送体系和先进的技术支撑，确保每一单都能准时送达。
        </p>
      </div>
    </div>

    <div class="content" v-else>
      <div class="filters">
        <div class="filter-group">
          <label>城市：</label>
          <el-select
            v-model="selectedCity"
            class="filter-select"
            placeholder="全部城市"
          >
            <el-option label="全部城市" value=""> </el-option>
            <el-option label="北京" value="beijing"> </el-option>
            <el-option label="上海" value="shanghai"> </el-option>
            <el-option label="广州" value="guangzhou"> </el-option>
            <el-option label="深圳" value="shenzhen"> </el-option>
          </el-select>
        </div>

        <div class="filter-group">
          <label>经验：</label>
          <el-select
            v-model="selectedExperience"
            class="filter-select"
            placeholder="不限经验"
          >
            <el-option label="不限经验" value=""> </el-option>
            <el-option label="1-3年" value="junior"> </el-option>
            <el-option label="3-5年" value="mid"> </el-option>
            <el-option label="5年以上" value="senior"> </el-option>
          </el-select>
        </div>

        <div class="filter-group">
          <label>薪资：</label>
          <el-select
            v-model="selectedSalary"
            class="filter-select"
            placeholder="不限薪资"
          >
            <el-option label="不限薪资" value=""> </el-option>
            <el-option label="5K-10K" value="5k-10k"> </el-option>
            <el-option label="10K-20K" value="10k-20k"> </el-option>
            <el-option label="20K以上" value="20k+"> </el-option>
          </el-select>
        </div>
      </div>

      <div class="job-listings">
        <div class="job-item" v-for="job in jobList" :key="job.id">
          <div class="job-header">
            <h3 class="job-title">{{ job.title }}</h3>
            <div class="job-salary">{{ job.salary }}</div>
          </div>
          <div class="job-info">
            <span class="job-location">{{ job.location }}</span>
            <span class="job-experience">{{ job.experience }}</span>
            <span class="job-edu">{{ job.education }}</span>
          </div>
          <div class="job-tags">
            <span v-for="tag in job.tags" :key="tag" class="job-tag">{{
              tag
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const activeTab = ref("company");
const selectedCity = ref("");
const selectedExperience = ref("");
const selectedSalary = ref("");

// 示例岗位数据
const jobs = ref([
  {
    id: 1,
    title: "前端开发工程师",
    salary: "15K-25K",
    location: "北京",
    experience: "3-5年",
    education: "本科",
    tags: ["React", "Vue", "JavaScript"],
  },
  {
    id: 2,
    title: "后端开发工程师",
    salary: "18K-30K",
    location: "上海",
    experience: "5年以上",
    education: "本科",
    tags: ["Java", "Spring", "MySQL"],
  },
  {
    id: 3,
    title: "产品经理",
    salary: "20K-35K",
    location: "深圳",
    experience: "3-5年",
    education: "本科",
    tags: ["产品规划", "用户体验", "数据分析"],
  },
  {
    id: 4,
    title: "UI设计师",
    salary: "12K-20K",
    location: "广州",
    experience: "1-3年",
    education: "本科",
    tags: ["视觉设计", "交互设计", "Sketch"],
  },
]);

// 根据筛选条件过滤岗位
const jobList = computed(() => {
  return jobs.value.filter((job) => {
    // 城市筛选
    if (
      selectedCity.value &&
      job.location !== getCityName(selectedCity.value)
    ) {
      return false;
    }

    // 经验筛选
    if (
      selectedExperience.value &&
      job.experience !== getExperienceName(selectedExperience.value)
    ) {
      return false;
    }

    // 薪资筛选
    if (
      selectedSalary.value &&
      job.salary !== getSalaryName(selectedSalary.value)
    ) {
      return false;
    }

    return true;
  });
});

const getCityName = (cityValue) => {
  const cityMap = {
    beijing: "北京",
    shanghai: "上海",
    guangzhou: "广州",
    shenzhen: "深圳",
  };
  return cityMap[cityValue] || "";
};

const getExperienceName = (expValue) => {
  const expMap = {
    junior: "1-3年",
    mid: "3-5年",
    senior: "5年以上",
  };
  return expMap[expValue] || "";
};

const getSalaryName = (salaryValue) => {
  const salaryMap = {
    "5k-10k": "5K-10K",
    "10k-20k": "10K-20K",
    "20k+": "20K以上",
  };
  return salaryMap[salaryValue] || "";
};

const switchTab = (tab) => {
  activeTab.value = tab;
  // 这里可以添加切换标签时需要执行的逻辑
  console.log("切换到标签:", tab);
};
</script>

<style lang="scss" scoped>
.employDetail-page {
  min-height: calc(100vh - 150px);
  .header {
    margin: auto;
    width: 1200px;
    height: 260px;
    padding: 20px 30px;
    background-color: #f9f9f9;
    margin-top: 20px;
    .header-title {
      background-color: white;
      width: 100%;
      padding: 11px 24px;
      // 第一个div
      div:first-child {
        font-size: 24px;
        font-weight: bold;
      }
      div:last-child {
        margin-top: 6px;
        font-size: 18px;
      }
    }
    .job-stats {
      display: flex;
      margin-top: 20px;
    }

    .job-stat-item {
      width: 160px;
      height: 60px;
      text-align: center;
      color: #babbbb;
    }

    .divider {
      width: 1px;
      height: 60px;
      background-color: #ddd;
      transform: scaleX(0.5);
      transform-origin: 50% 50%;
    }
    .box {
      margin-top: 20px;
      height: 100px;
    }

    .custom-tabs {
      display: flex;
      height: 100%;
      line-height: 100px;
    }

    .tab-item {
      flex: 1;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      color: #666;
      position: relative;
      transition: all 0.3s;
    }

    .tab-item:hover {
      color: #409eff;
    }

    .tab-item.active {
      color: #409eff;
      font-weight: bold;
    }

    .tab-item.active::after {
      content: "";
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
      height: 2px;
      background-color: #409eff;
    }
  }

  .content {
    width: 1200px;
    margin: 20px auto;
    padding: 20px 30px;
    background-color: #f9f9f9;
  }

  .content-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .title-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-right: 15px;
    white-space: nowrap;
  }

  .title-line {
    flex: 1;
    height: 1px;
    background-color: #ddd;
  }

  .content-body {
    display: flex;
    align-items: flex-start;
  }

  .content-logo {
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 8px;
  }

  .content-description {
    flex: 1;
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }

  .filters {
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .filter-group {
    display: flex;
    align-items: center;
  }

  .filter-group label {
    margin-right: 10px;
    font-weight: bold;
    color: #333;
  }

  .filter-select {
    width: 150px;
  }

  .job-listings {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
  }

  .job-item {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }

  .job-item:last-child {
    border-bottom: none;
  }

  .job-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .job-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
  }

  .job-salary {
    font-size: 16px;
    font-weight: bold;
    color: #ff6600;
  }

  .job-info {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
  }

  .job-tags {
    display: flex;
    gap: 10px;
  }

  .job-tag {
    padding: 4px 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
  }
}
</style>
